<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta name="format-detection" content="telephone=no" /> 
<link rel="shortcut icon" href="images/logo.ico" />
<title>闪度生活</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />


<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.1.min.css">
<link rel="stylesheet" type="text/css" href="css/iosSelect.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/axios-config.js"></script>
<script src="./js/js.cookie.js"></script>
<script src="./js/utils.js"></script>

<style>
      .service_inner1_list{
        position: relative;
      }

      .pinglun1_show{
        display: block;
      }
      .service_show{
        display: block;
      }
      .pinglun1_show_con{
        padding:0;
      }
      .pinglun1_show_con h5{
        text-align: center;
        font-size: 0.16rem;
        font-weight: bold;
        background: #eeedf3;
        margin: 0;
        padding: 0.24rem 0 0.16rem;
        position: relative;
        color:#222;
      }
      .pinglun1_show_con h4{
        text-align: center;
        font-size: 0.16rem;
        font-weight: bold;
        margin: 0;
        padding: 0.24rem 0.24rem 0.1rem;
        position: relative;
        color: #222;
        text-align: left;
      }
      .pinglun1_show_con h5 img{
        position: absolute;
        top: 0.08rem;
        right: 0.08rem;
      }
      .pinglun1_show_con_f1 {
        position: relative;
        text-align: left;
        padding: 0.16rem 0.18rem;
      }
      .pinglun1_show_con_f4 {
        position: relative;
        text-align: right;
        padding: 0.16rem 0.18rem;
      }
      .pinglun1_show_con_f1_left{
        float:left;
        width:48%;
      }
      .pinglun1_show_con_f1_left img{
        margin-right:0.12rem;
        vertical-align: middle;
      }
      .pinglun1_show_con_f1_left span{
        font-size:0.14rem;
        color:#222;
        vertical-align: middle;
        font-weight: bold;
      }
      .pinglun1_show_con_f1_right span{
        font-size: 0.14rem;
        color: #9b9b9b;
        vertical-align: middle;
        display: block;
        height: 0.25rem;
        line-height: 0.25rem;
      }
      .pinglun1_show_con_f2{
        border-bottom: 0.1rem solid #eeedf3;
      }
      .pinglun1_show_con_f3{
        border-bottom: 1px solid #ebebeb;
      }
      .pinglun1_show_con_btn{
        height:0.56rem;
        line-height: 0.56rem;
        width:100%;
        background:#20b7fe;
        color:#ff0000;
        font-size:0.16rem;
        text-align: center;
        font-weight: 600;
      }
      .service_show_con p{
        padding-left:0;
      }
      .service_inner1_list_content1{
        float:left;
      }
      .service_inner1_list_content2{
        float:right;
      }

</style>


<script>
        var _hmt = _hmt || [];
        (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?b25bf95dd99f58452db28b1e99a1a46f";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
        })();
</script>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/swiper-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/main.js"></script>

</head>

<body style="background:#f3f5f9;">
	
<div id="app" v-cloak>

<div class="pinglun1_show" v-show="flag1">
    <div class="pinglun1_show_bg"></div>
    <div class="pinglun1_show_con">
        <h5>选择支付方式 <img src="images/order_sure_cha.png" alt="" width="25" class="zhifu_close" @click="hideZhifu()"> </h5>
        <div class="pinglun1_show_con_f1 clearfix pinglun1_show_con_f2" @click="selectZhifu(false)">
            <div class="pinglun1_show_con_f1_left">
              <img src="images/order_sure_1.jpg" alt="" width="16" v-show="flag2">
              <img src="images/order_sure_2.jpg" alt="" width="16" v-show="!flag2">
              <img src="images/order_sure_yue.jpg" alt="" width="25">
              <span>钱包支付</span>
            </div>
            <div class="pinglun1_show_con_f1_right">
              <span>{{mywallet.wallet}}</span>
            </div>
        </div>
        <div class="pinglun1_show_con_f1 clearfix pinglun1_show_con_f3" @click="selectZhifu(true)">
            <div class="pinglun1_show_con_f1_left">
              <img src="images/order_sure_1.jpg" alt="" width="16" v-show="!flag2">
              <img src="images/order_sure_2.jpg" alt="" width="16" v-show="flag2">
              <img src="images/order_sure_weixin.jpg" alt="" width="25">
              <span>微信支付</span>
            </div>
        </div>
        <div class="pinglun1_show_con_btn" @click="sureZhifu()">确认支付</div>
    </div>
</div>

<div class="service_show" v-show="flag3">
    <div class="service_show_bg"></div>
    <div class="service_show_con">
        <h5>温馨提示 </h5>
        <p>用户下单后支付预约服务费；服务人员到达现场根据实际工作量沟通最终价格；双方认可服务价格后，用户点击开始工作，服务人员开始为用户提供服务；服务完成后用户支付尾款</p>
        <h4><a href="javascript:void(0);" @click="closeTishi()"><b>好的,知道了</b></a></h4>
    </div>
</div>

<!-- <div class="chakan_show">
    <div class="chakan_show_bg"></div>
    <div class="chakan_show_con">
        <h5>用户下单后可查看联系电话</h5>
    </div>
</div> -->
<!--  / header  -->
<div class="header_longevity">
     <div class="header_map_longevity">   
        <img src="images/jiantou.png" alt="">
        <span>返回</span>
     </div>
     <div class="logo_longevity">服务需求</div> 
</div>
<!--  / header  -->


<div class="service">
	
	
	<div class="service_inner1">
		<a href="javascript:void(0);" v-if="addressList==''" @click="goAddress()">
            <div class="service_inner1_list">
                <h5>服务地址 :</h5>
                <p class="service_inner1_dizhi">请选择服务地址 <i class="fa fa-angle-right"></i></p>            
            </div> 
        </a>
        <a href="javascript:void(0);" v-else @click="goAddress()">
            <div class="service_inner1_list">
                <div class="service_inner1_list_title">服务地址 :</div>
                <div class="service_inner1_list_content">
                    <div class="service_inner1_list_contents clearfix">
                        <div class="service_inner1_list_content1">{{addressList.consignee}}</div>
                        <div class="service_inner1_list_content2">{{addressList.telephone}}</div>
                    </div>                    
                    <div class="service_inner1_list_content3">{{addressList.province}}{{addressList.city}}{{addressList.district}}{{addressList.address}}</div>
                </div>           
            </div> 
        </a>
		<div class="service_inner1_list no_border service_inner1_list3">
			<h5>服务内容 :</h5>
		</div>
		<div class="service_inner1_list_txt no_border">
			<textarea placeholder="如:洗衣,扫地,带小孩(限60字)" v-html="service_details.service_content"></textarea>
		</div>
		<div class="service_sp1"></div>
		<div class="service_inner1_list" v-if="isCompany==2">
			<h5>是否找别人替代 :</h5>
			<div class="yes_btn">
				<span></span>
			</div>
		</div>
		
		<div class="service_inner1_list no_border service_inner1_list3">
			<h5>其他说明 :</h5>
		</div>
		<div class="service_inner1_list_txt no_border">
			<textarea v-model="explain" placeholder="对服务人员的要求,无要求可不填(限120字)"></textarea>
		</div>
		
		<!-- <div class="service_inner1_list">
			<h5>服务日期:</h5>
		</div> -->
		<div class="service_sp1"></div>
		<div class="service_inner1_list service_inner1_list_center">
            <div class="service_inner1_list_bg">服务日期 :</div>
			<span class="service_inner1_span">
			  <div class="form-item item-line service_inner1_list1" id="selectDate">                    
			    <div class="pc-box">                     
			        <span data-year="" data-month="" data-date="" id="showDate">请选择</span>  
			    </div>             
              </div>
			<i class="fa fa-caret-down"></i>
			</span>
			至
			<span class="service_inner1_span">
			  <div class="form-item item-line service_inner1_list1" id="selectDate1">                    
			    <div class="pc-box">                     
			        <span data-year="" data-month="" data-date="" id="showDate1">请选择</span>  
			    </div>             
              </div>
			  <i class="fa fa-caret-down"></i>
			</span>
		</div>
		
		
		<div class="service_inner1_list service_inner1_list_time">
			<h5>预约时间 :</h5>
			<p>只需选择开始和结束时间 <i class="fa fa-angle-right"></i></p>
		</div>
		<div class="service_inner1_time_show">
			<p>点击以下方格选择时间24小时制，若要取消选择请您再次点击该方格</p>
			<div class="row">
				<div class="col-xs-2 col-time1" v-for="(hour,index) in allHours" :data-id="index">{{hour}}</div>
			</div>
		</div>
		
		<div class="service_inner1_list no_border">
			<h5>预约时长 :</h5>
			<p>{{duration1}}小时</p>
		</div>
		
		
		<!-- <div class="service_inner1_list_txt">
			<textarea placeholder="详细地址"></textarea>
		</div> -->
		
		
		<div class="service_inner_zf">
			预约服务费 <span> ￥{{service_details.price*duration1}}.00</span>
			<a href="javascript:void(0);" @click="service_is_subscribe">支付</a>
		</div>
		
	</div>
	
	
		
</div>

</div>


</body>


<!-- <script src="js/pccs.js"></script> -->
<script src="js/zepto.js"></script>
<script src="js/iosSelect.js"></script>
<script src="js/areaData_v2.js"></script>
<script type="text/javascript">
	
	var vm = new Vue({
	el:"#app",
	data() {
        return {
            city_name:sessionStorage.getItem("cityLocation"),
            Service_list:[],
            Province_list:'',
            time_length:'',
            explain:'',
            isCompany:getCookie("service_is_company"),
            addressList:[],
            service_details:[],
            duration1:'',
            selDuration1:[],
            subscribe1:'',
            endsubscribe1:'',
            timing1:'',
            endtiming1:'',
            hours:'',
            allHours:["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"],               
            selHours:[], 
            flag1:false,  
            flag2:false, 
            flag3:false,
            mywallet:[],
            OrderNo:[],
            is_take1:'',
        }
	},
    created: function () {
		var $this = this;
        if(JSON.parse(sessionStorage.getItem('addressDetail'))){
            $this.addressList=JSON.parse(sessionStorage.getItem('addressDetail'));
        }

        $this.getService_details();  
        $this.getWallet();
          
    },
    mounted:function(){
        var $this=this;
        Timer();   
        $this.selTiming(); 	
    },
    methods:{
    	//判断是否能提交
    	service_is_subscribe:function(){
    		var $this = this;
    		
    		const data = {
				service_id:getCookie('service_details_id')
    		}
    		
    		Axios.post(window.Url.service_is_subscribe, data).then((res) => {
    			tt(res.result,'http://shandu.unohacha.com/wx_shandu/service_inner1.html');
    			if(res.result == 1){
 				    // $this.Service_list = res.info.service;
					$this.submit_service_order();
    			}else if(res.result == 0){
    				alert('判断是否能提交：'+res.info)
    			}
    			
	        }).catch((err) => {
	          console.log('判断是否能提交：'+err)
	        })
    	},
    	//提交预约订单
    	submit_service_order:function(){
    		var $this = this;
            var selDate=$("#showDate").html();
            var selDate1=$("#showDate1").html();
            if(selDate=="请选择"){
                $this.subscribe1='';
            }else{
                $this.subscribe1=selDate;
            }

            if(selDate1=="请选择"){
                $this.endsubscribe1='';
            }else{
                $this.endsubscribe1=selDate1;
            }

            $this.timing1=$this.selHours[0];
            $this.endtiming1=$this.selHours[1];
            
            // console.log($this.timing1,$this.endtiming1,$this.duration1);
            if($('.yes_btn').hasClass("on")){
                $this.is_take1=1;
            }else{
                $this.is_take1=0;
            }

            if($this.addressList==''  || !$this.addressList || $this.addressList==null || $this.addressList==undefined){
                alert("请选择联系地址");
                return;
            }
    		
    		const data = {
                service_id:getCookie("service_details_id"),
                service_type:getCookie("service_type_id"),
                contacts:$this.addressList.consignee,
                tel:$this.addressList.telephone,
                duration:$this.duration1,
                subscribe:$this.subscribe1,
                endsubscribe:$this.endsubscribe1,
                // subscribe:'2018-9-1',
                // endsubscribe:'2018-9-1',
                timing:$this.timing1,
                endtiming:$this.endtiming1,
                province:$this.addressList.province,
                city:$this.addressList.city,
                district:$this.addressList.district,
                address:$this.addressList.address,
                is_take:$this.is_take1,
    		}
    		
    		Axios.post(window.Url.service_order, data).then((res) => {
    			tt(res.result,'http://shandu.unohacha.com/wx_shandu/service_inner1.html');
    			if(res.result == 1){
    				// alert('提交预约订单：'+res.info)
                    $this.flag3=true;
                    $this.OrderNo=res.info;
    			}else if(res.result == 0){
    				alert('提交预约订单：'+res.info)
    			}
    			
	        }).catch((err) => {
	          console.log('提交预约订单：'+err)
	        })
    	},
    	//跳转地址列表选择地址
    	goAddress:function(){
    		setCookie('what',1);
            window.location.href="myAddress.html";
    	},
        //服务详情
        getService_details:function(){
            var $this = this;
            
            const data = {
                service_id:getCookie("service_details_id")
            }
            
            Axios.post(window.Url.service_details, data).then((res) => {
                tt(res.result,'http://shandu.unohacha.com/wx_shandu/service_inner1.html');
                if(res.result == 1){
                    $this.service_details = res.info.service;
                    // console.log($this.service_details);
                }else if(res.result == 0){
                    alert('服务详情：'+res.info)
                }
                
            }).catch((err) => {
              console.log('服务详情：'+err)
            })
        },
        //获取服务时间点
        selTiming:function(){
            var $this=this;
            var count=0;
            $('.col-time1').click(function(){
                if($(this).hasClass("active")){
                    $(this).removeClass("active");
                    count=count-1;
                    // console.log(3);
                }else{
                    if(count>=2){
                        // console.log(2);
                        return;
                    }else{
                        $(this).addClass("active");
                        count=count+1;
                        // console.log(1);
                    }
                }

                var result=[];
                var result1=[];
                $(".active").each(function(){
                    // result=result+ $(this).html()+',';
                    result.push($(this).html());
                    result1.push($(this).attr("data-id"));
                });
            
                $this.selHours=result;
                $this.selDuration1=result1
                // console.log($this.selHours,$this.selDuration1);
                if($this.selDuration1.length>=2){
                    $this.duration1=$this.selDuration1[1]-$this.selDuration1[0];
                }
                // console.log($this.duration1);
            })           
        },
        //支付订单弹出框隐藏
        hideZhifu:function(){
            $this=this;
            $this.flag1=false;
        },
        //选择支付方式
        selectZhifu:function(state){
            $this=this;
            $this.flag2=state;                       
        },

        //温馨提示弹框关闭，余额支付弹框打开
        closeTishi:function(){
            $this=this;
            $this.flag3=false;
            $this.flag1=true;
        },

        //余额和微信支付
        sureZhifu:function(){
            $this=this;
            if(!$this.flag2){
                const data = {
                    orderno:$this.OrderNo,
                    type:4,
                }

                Axios.post(window.Url.tuanOrder_alipay,data).then((res) => {  
                    tt(res.result,'http://shandu.unohacha.com/wx_shandu/service_inner1.html');        
                    if(res.result == 1){  
                      // alert("余额支付成功");
                      $this.flag1=false;
                      window.location.href="orderList.html";                                                      
                    }else if(res.result == 0){
                      alert("余额支付失败:"+res.info);
                    }
                    
                }).catch((err) => {
                    console.log("余额支付失败:"+err);
                })
            }else if($this.flag2){
                const data = {
                  orderno:$this.OrderNo,
                  type:4,
                  is_wxin:1
                }

                Axios.post(window.Url.order_WeixinPay,data).then((res) => {              
                    if(res.result == 1){  
                        // alert("res.info");
                        sessionStorage.setItem('weixins', JSON.stringify(res.jsApiParameters));
                        sessionStorage.setItem('error_url', "user.html");
                        sessionStorage.setItem('success_url', "orderList.html");
                        window.location.href = 'wxpay.html';                                                          
                    }else
                    {
                      console.log("微信支付失败:"+res.info);
                    }
                    
                }).catch((err) => {
                    console.log("微信支付失败:"+err);
                })

            }
        },

        //获取钱包余额
        getWallet:function(){
            var $this=this;
            const data = {
                  
            }       
            Axios.post(window.Url.Ucenter_wallet,data).then((res) => {  
              tt(res.result,'http://shandu.unohacha.com/wx_shandu/service_inner1.html');        
              if(res.result == 1){  
                // alert("获取钱包余额成功");
                $this.mywallet=res.info.wallet;                                             
              }else if(res.result == 0){
                console.log("获取钱包余额失败:"+res.info);
              }
              
            }).catch((err) => {
              console.log("获取钱包余额失败:"+err);
            })

        }
	}
})

//获取服务日期
function Timer(){
    var selectDateDom = $('#selectDate');
    var showDateDom = $('#showDate');
    var selectDate1Dom = $('#selectDate1');
    var showDate1Dom = $('#showDate1');
    // 初始化时间
    var now = new Date();
    var nowYear = now.getFullYear();
    var nowMonth = now.getMonth() + 1;
    var nowDate = now.getDate();
    showDateDom.attr('data-year', nowYear);
    showDateDom.attr('data-month', nowMonth);
    showDateDom.attr('data-date', nowDate);
    // 数据初始化
    function formatYear (nowYear) {
        var arr = [];
        for (var i = nowYear - 5; i <= nowYear + 5; i++) {
            arr.push({
                id: i + '',
                value: i + '年'
            });
        }
        return arr;
    }
    function formatMonth () {
        var arr = [];
        for (var i = 1; i <= 12; i++) {
            arr.push({
                id: i + '',
                value: i + '月'
            });
        }
        return arr;
    }
    function formatDate (count) {
        var arr = [];
        for (var i = 1; i <= count; i++) {
            arr.push({
                id: i + '',
                value: i + '日'
            });
        }
        return arr;
    }
    var yearData = function(callback) {
        // settimeout只是模拟异步请求，真实情况可以去掉
        // setTimeout(function() {
            callback(formatYear(nowYear))
        // }, 2000)
    }
    var monthData = function (year, callback) {
        // settimeout只是模拟异步请求，真实情况可以去掉
        // setTimeout(function() {
            callback(formatMonth());
        // }, 2000);
    };
    var dateData = function (year, month, callback) {
        // settimeout只是模拟异步请求，真实情况可以去掉
        // setTimeout(function() {
            if (/^(1|3|5|7|8|10|12)$/.test(month)) {
                callback(formatDate(31));
            }
            else if (/^(4|6|9|11)$/.test(month)) {
                callback(formatDate(30));
            }
            else if (/^2$/.test(month)) {
                if (year % 4 === 0 && year % 100 !==0 || year % 400 === 0) {
                    callback(formatDate(29));
                }
                else {
                    callback(formatDate(28));
                }
            }
            else {
                throw new Error('month is illegal');
            }
        // }, 2000);
        // ajax请求可以这样写
        /*
        $.ajax({
            type: 'get',
            url: '/example',
            success: function(data) {
                callback(data);
            }
        });
        */
    };
    selectDateDom.bind('click', function () {
        var oneLevelId = showDateDom.attr('data-year');
        var twoLevelId = showDateDom.attr('data-month');
        var threeLevelId = showDateDom.attr('data-date');
        var iosSelect = new IosSelect(3, 
            [yearData, monthData, dateData],
            {
                title: '请选择时间',
                itemHeight: 35,
                oneLevelId: oneLevelId,
                twoLevelId: twoLevelId,
                threeLevelId: threeLevelId,
                showLoading: true,
                callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                    showDateDom.attr('data-year', selectOneObj.id);
                    showDateDom.attr('data-month', selectTwoObj.id);
                    showDateDom.attr('data-date', selectThreeObj.id);
                    showDateDom.html(parseInt(selectOneObj.value) + '-' + parseInt(selectTwoObj.value) + '-' +  parseInt(selectThreeObj.value));
                    showDate1Dom.html(parseInt(selectOneObj.value) + '-' + parseInt(selectTwoObj.value) + '-' +  parseInt(selectThreeObj.value));
                    $('.service_inner1_time_show').css('display','block');
                }
        });
    });

    selectDate1Dom.bind('click', function () {
        if(showDate1Dom.html()=="请选择"){
            alert("请选择开始时间");
        }else{
            return;
        }
    })
}
	
    
</script>

<script>
$(window).ready(function(){
	var flag=true;

$('.yes_btn').click(function(){
	if($(this).hasClass('on')){
		$('.yes_btn').removeClass('on');
	}else{
		$('.yes_btn').addClass('on');
	}
})

$('.header_map_longevity').click(function(){
    history.go(-1);
});

$('.service_inner1_list_time').click(function(){
	
	if($('#showDate').html()=="请选择"){
        alert("请选择开始和结束时间")
    }else{
        return;
    }
});

})  
</script>


</html>
